<template>
	<div id="lg">
		<nav>
			<div id="title">欢迎使用资产管理系统</div>
		</nav>
		<main>
			<div id="login">
				<div>
					<el-form :model="form" label-width="auto" style="width: 100%">
						<el-form-item>
							<el-input
								v-model="form.root"
								:prefix-icon="Avatar"
								placeholder="Please input account"
								clearable />
						</el-form-item>
						<el-form-item>
							<el-input
								v-model="form.pwd"
								:prefix-icon="Lock"
								show-password
								type="password"
								placeholder="Please input password" />
						</el-form-item>
						<el-form-item>
							<el-button id="lgbt" @click="load">登 录</el-button>
						</el-form-item>
					</el-form>
				</div>
				<div></div>
			</div>
		</main>
	</div>
</template>
<script setup>
	import { reactive } from "vue";
	import { Lock, Avatar } from "@element-plus/icons-vue";
	import { addObj } from "@/api";
	import router from "@/router";
	import { setToken } from "@/utils/auth";

	const form = reactive({
		root: "master",
		pwd: "88888888",
	});

	const load = () => {
		addObj("/login", form).then((res) => {
			setToken(res.headers.authorization);
			router.push("/home");
		});
	};
</script>
<style lang="scss" scoped>
	#lg {
		height: 100%;
		background: linear-gradient(to top right, #552b68, #26756f, #f8d03f);
		#title {
			color: #fff;
			padding-top: 8rem;
			font-size: 2.5rem;
			text-align: center;
			-webkit-box-reflect: below -20px linear-gradient(transparent, rgba(255, 255, 255, 0.2));
			font-weight: 1;
		}
		main {
			padding-top: 5rem;
			width: 100%;
			display: flex;
			justify-content: center;
			#login {
				width: 248px;
				#lgbt {
					width: 100%;
					-webkit-box-reflect: below 12px
						linear-gradient(transparent, rgba(255, 255, 255, 0.1));
				}
			}
		}
	}
</style>
